<template>
  <el-container class="examing-page">
    <el-header>
      <el-row>
        <el-col :span="8">{{examtitle}}{{lookError ? ' - 错题查看': ''}}<span @click="toBack" class="quit-btn">{{checkmode ? '返回列表' : '退出此考试'}}</span></el-col>
        <el-col v-if="checkmode" :span="8" :offset="8" style="text-align: right;">总分 - {{lookError ? my_total_score : total_score}}{{lookError ? ` 得分 - ${my_score}` : ''}}</el-col>
        <el-col v-else :span="8" :offset="8" style="text-align: right;">时间 - {{countdownMin}}:{{countdownSec}}</el-col>
      </el-row>
    </el-header>
    <el-container>
      <!-- 考试内容部分 S -->
      <el-main class="examing-box">
        <el-tabs type="card" tab-position="right">
          <!-- 单选题 S -->
          <el-tab-pane v-if="singleQuestions.length > 0" label="单选">
            <el-row v-for="(item, index) in currSingleQuestions" :key="item.id" :gutter="10" class="question-block">
              <el-col class="title" :class="[item.noPass ? 'title-error' : '']">S{{(pagination.single.pageNo - 1) * pagination.single.pageSize + index + 1}}. {{item.title}}</el-col>
              <el-col v-if="item.images && item.images.length > 0" class="images">
                <div v-for="(image, imgIdx) in item.images" class="imageWrap">
                  <img :src="image.image"></img>
                  <div @click="scaleImg(image.image)" class="modal">
                    查看大图
                  </div>
                </div>
              </el-col>
              <el-col class="answer" v-for="(aitem, aindex) in item.content" :key="aindex" :span="getRowSpan(item.content.length)">
                <el-radio :disabled="checkmode" @change="onchange" v-model="answers['single-'+ item.id]" :label="_index2ABC(aindex)">{{_index2ABC(aindex)}}. {{aitem.text}}</el-radio>
              </el-col>
              <el-col v-if="checkmode" class="answer">
                作答：{{a_answer({type: 'single', content: answers['single-'+ item.id]})}} <br/>
                答案：{{q_answer({type: 'single', content: item.content})}} <br/>
                解析: {{item.note ? item.note : '暂无'}}
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  layout="prev, pager, next"
                  :currentPage="pagination.single.pageNo"
                  :page-size="pagination.single.pageSize"
                  :total="pagination.single.total"
                  @current-change="(pageNo) => pagination.single.pageNo = pageNo">
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 单选题 E -->
          <!-- 多选题 S -->
          <el-tab-pane v-if="multiQuestions.length > 0" label="多选">
            <el-row v-for="(item, index) in currMultiQuestions" :key="item.id" :gutter="10" class="question-block">
              <el-col class="title" :class="[item.noPass ? 'title-error' : '']">M{{(pagination.multiple.pageNo - 1) * pagination.multiple.pageSize + index + 1}}. {{item.title}}</el-col>
              <el-col v-if="item.images && item.images.length > 0" class="images">
                <div v-for="(image, imgIdx) in item.images" class="imageWrap">
                  <img :src="image.image"></img>
                  <div @click="scaleImg(image.image)" class="modal">
                    查看大图
                  </div>
                </div>
              </el-col>
              <el-checkbox-group @change="sortAnswer" v-model="answers['multiple-'+ item.id]">
                <el-col class="answer" v-for="(aitem, aindex) in item.content" :key="aindex" :span="getRowSpan(item.content.length)">
                  <el-checkbox :disabled="checkmode" :label="_index2ABC(aindex)">{{_index2ABC(aindex)}}. {{aitem.text}}</el-checkbox>
                </el-col>
              </el-checkbox-group>
              <el-col v-if="checkmode" class="answer">
                作答：{{a_answer({type: 'multiple', content: answers['multiple-'+ item.id]})}} <br/>
                答案：{{q_answer({type: 'multiple', content: item.content})}} <br/>
                解析: {{item.note ? item.note : '暂无'}}
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  layout="prev, pager, next"
                  :currentPage="pagination.multiple.pageNo"
                  :page-size="pagination.multiple.pageSize"
                  :total="pagination.multiple.total"
                  @current-change="(pageNo) => pagination.multiple.pageNo = pageNo">
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 多选题 E -->
          <!-- 判断题 S -->
          <el-tab-pane v-if="judgeQuestions.length > 0" label="判断">
            <el-row v-for="(item, index) in currJudgeQuestions" :key="item.id" :gutter="10" class="question-block">
              <el-col class="title" :class="[item.noPass ? 'title-error' : '']">J{{(pagination.judge.pageNo - 1) * pagination.judge.pageSize + index + 1}}. {{item.title}}</el-col>
              <el-col v-if="item.images && item.images.length > 0" class="images">
                <div v-for="(image, imgIdx) in item.images" class="imageWrap">
                  <img :src="image.image"></img>
                  <div @click="scaleImg(image.image)" class="modal">
                    查看大图
                  </div>
                </div>
              </el-col>
              <template v-if="!checkmode">
                <el-col class="answer" :span="3" :offset="1">
                  <el-radio :disabled="checkmode"  @change="onchange" v-model="answers['judge-'+ item.id]" label="yes">对</el-radio>
                </el-col>
                <el-col class="answer" :span="3">
                  <el-radio :disabled="checkmode" @change="onchange" v-model="answers['judge-'+ item.id]" label="no">错</el-radio>
                </el-col>
              </template>
              <el-col v-else class="answer">
                作答：{{a_answer({type: 'judge', content: answers['judge-'+ item.id]})}}<br/>
                答案：{{q_answer({type: 'judge', content: item.content})}} <br/>
                解析: {{item.note ? item.note : '暂无'}}
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  layout="prev, pager, next"
                  :currentPage="pagination.judge.pageNo"
                  :page-size="pagination.judge.pageSize"
                  :total="pagination.judge.total"
                  @current-change="(pageNo) => pagination.judge.pageNo = pageNo">
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 判断题 E -->
          <!-- 填空题 S -->
          <el-tab-pane v-if="textQuestions.length > 0" label="填空">
            <el-row v-for="(item, index) in currTextQuestions" :key="item.id" :gutter="10" class="question-block">
              <el-col class="title" :class="[item.noPass ? 'title-error' : '']">F{{(pagination.text.pageNo - 1) * pagination.text.pageSize + index + 1}}. {{item.title}}</el-col>
              <el-col v-if="item.images && item.images.length > 0" class="images">
                <div v-for="(image, imgIdx) in item.images" class="imageWrap">
                  <img :src="image.image"></img>
                  <div @click="scaleImg(image.image)" class="modal">
                    查看大图
                  </div>
                </div>
              </el-col>
              <el-col v-if="!checkmode" class="answer" v-for="(aitem, aindex) in item.content" :key="aindex" :span="getRowSpan(item.content.length)">
                <el-input :disabled="checkmode" size="small" :placeholder="'填空'+ (aindex + 1)" v-model="answers['text-'+ item.id][aindex]" ></el-input>
              </el-col>
              <el-col v-else class="answer">
                答案：{{answers['judge-'+ item.id]}} <br/>
                解析: {{item.note ? item.note : '暂无'}}
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  layout="prev, pager, next"
                  :currentPage="pagination.text.pageNo"
                  :page-size="pagination.text.pageSize"
                  :total="pagination.text.total"
                  @current-change="(pageNo) => pagination.text.pageNo = pageNo">
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 填空题 E -->
          <!-- 问答题 S -->
          <el-tab-pane v-if="compositeQuestions.length > 0" label="问答">
            <el-row v-for="(item, index) in currCompositeQuestions" :key="item.id" :gutter="10" class="question-block">
              <el-col class="title" :class="[item.noPass ? 'title-error' : '']">E{{(pagination.composite.pageNo - 1) * pagination.composite.pageSize + index + 1}}. {{item.title}}</el-col>
              <el-col v-if="item.images && item.images.length > 0" class="images">
                <div v-for="(image, imgIdx) in item.images" class="imageWrap">
                  <img :src="image.image"></img>
                  <div @click="scaleImg(image.image)" class="modal">
                    查看大图
                  </div>
                </div>
              </el-col>
              <el-col v-if="!checkmode" class="answer" :span="18">
                <el-input :disabled="checkmode" size="small" type="textarea" :rows="5" v-model="answers['composite-'+ item.id]"></el-input>
              </el-col>
              <el-col v-else class="answer">
                答案：{{q_answer({type: 'composite', content: item.content})}} <br/>
                解析: {{item.note ? item.note : '暂无'}}
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  layout="prev, pager, next"
                  :currentPage="pagination.composite.pageNo"
                  :page-size="pagination.composite.pageSize"
                  :total="pagination.composite.total"
                  @current-change="(pageNo) => pagination.composite.pageNo = pageNo">
                </el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 问答题 E -->
        </el-tabs>
      </el-main>
      <!-- 考试内容部分 E -->
      <!-- 按钮部分 S -->
      <el-footer>
        <el-row v-if="!checkmode">
          <el-col :span="2" :offset="10" style="margin-bottom: 0; display: flex; justify-content: center; align-items: center;">
            <el-button type="primary" round @click="submitExam">提交考卷</el-button>
          </el-col>
        </el-row>
      </el-footer>
      <!-- 按钮部分 E -->
    </el-container>
    <!-- 考试结果 S -->
    <el-dialog
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false">
      <div class="resultBox flex flex-jbetween">
        <div class="flex-row flex-jcenter">
          <span :class="['ifont', 'iconfont', result.is_pass ? 'icon-wancheng' : 'icon-sad']" style="font-size:56px; margin-right: 20px"></span>
          <span style="font-size:20px">{{result.is_pass ? '测试通过.' : '测试未通过.'}}</span>
        </div>
        <div class="content">
          <div class="flex-row flex-jbetween"><span style="width:100px;">测试开始时间</span><span style="width:140px;">{{result.start_at}}</span></div>
          <div class="flex-row flex-jbetween"><span style="width:100px;">测试结束时间</span><span style="width:140px;">{{result.submit_at}}</span></div>
          <div class="flex-row flex-jbetween"><span style="width:100px;">答对题目</span><span style="width:140px;">{{result.correct_count}}/{{result.total_count}}</span></div>
          <div class="flex-row flex-jbetween"><span style="width:100px;">考试分数</span><span style="width:140px;">{{result.score}}</span></div>
        </div>
        <div class="flex-row flex-jcenter">
          <el-button type="primary" round @click="toList" >确定</el-button>
          <el-button type="primary" round @click="toError" >查看错题</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 考试结果 E -->
  </el-container>
</template>

<script>
import { quest_fmt_getQuestions } from '@/util/dataFMT'

export default {
  name: 'Examing',
  data () {
    return {
      dialogTableVisible: false,
      result: {"id":4,"test_id":1,"is_pass":0,"start_at":"2018-10-13 17:57:24","submit_at":"2018-10-13 17:57:45","is_finish":1,"updated_at":"2018-10-13 17:57:45","created_at":"2018-10-13 16:05:55","user_id":2174,"correct_count":0,"total_count":0},
      pagination: {
        single: {
          pageNo: 1,
          pageSize: 3,
          total: 0
        },
        multiple: {
          pageNo: 1,
          pageSize: 3,
          total: 0
        },
        judge: {
          pageNo: 1,
          pageSize: 3,
          total: 0
        },
        text: {
          pageNo: 1,
          pageSize: 3,
          total: 0
        },
        composite: {
          pageNo: 1,
          pageSize: 2,
          total: 0
        }
      },
      questions: '',
      answers: '',
      _examid: '',
      exam: [],
      countdown: 0,
      checkmode: false, // 查看试卷模式
      lookError: '',
      my_score: 0,
      my_total_score: 0
    }
  },
  created () {
    this.checkmode = this.$route.name == '查看试卷' || this.$route.name == '查看错题'
		this._isMakeup = this.$route.query.makeup;
    this._examid = this.$route.params.id
    console.log(this._examid)
    if (this.checkmode) {
      this.lookError = this.$route.name == '查看错题'
      this._lookExam()
    } else {
      this._startExam()
    }
  },
  mounted () {
    this.warningFn = function (event) {
      // Cancel the event as stated by the standard.
      event.preventDefault();
      // Chrome requires returnValue to be set.
      event.returnValue = '确认放弃此次考试？';
    }
    !this.checkmode && window.addEventListener("beforeunload", this.warningFn);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    this.timer = null
    window.removeEventListener("beforeunload", this.warningFn);
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    if (this.examing) {
      const answer = window.confirm('确认放弃此次考试？')
       if (answer) {
         next()
       } else {
         next(false)
       }
    } else {
      next()
    }
  },
  computed: {
    total_score () {
      return this.checkmode ? this.exam.total_score : ''
    },
    examtitle () {
      return this.exam.name
    },
    countdownMin () {
      let m = parseInt(this.countdown / 60)
      return m > 9 ? m : `0${m}`
    },
    countdownSec () {
      let s = this.countdown % 60
      return s > 9 ? s : `0${s}`
    },
    singleQuestions () {
      return this.genTypeQuestions('single')
    },
    multiQuestions () {
      return this.genTypeQuestions('multiple')
    },
    judgeQuestions () {
      return this.genTypeQuestions('judge')
    },
    textQuestions () {
      return this.genTypeQuestions('text')
    },
    compositeQuestions () {
      return this.genTypeQuestions('composite')
    },
    currSingleQuestions () {
      return this.genTypeCurrQuestions('single')
    },
    currMultiQuestions () {
      return this.genTypeCurrQuestions('multiple')
    },
    currJudgeQuestions () {
      return this.genTypeCurrQuestions('judge')
    },
    currTextQuestions () {
      return this.genTypeCurrQuestions('text')
    },
    currCompositeQuestions () {
      return this.genTypeCurrQuestions('composite')
    }
  },
  methods: {
    q_answer (question) {
      const {type, content} = question
      const answer_arr = []
      if (type == 'single' || type == 'multiple') {
        content.forEach((item, index) => {
          if (item.answer) {
            answer_arr.push(this._index2ABC(index))
          }
        })
        return answer_arr.join(',')
      } else if (type == 'judge') {
        return content.answer == 'yes' ? '正确' : '错误'
      } else if (type == 'text') {
        return content.map(item => item.text).join(' |---| ')
      } else if (type == 'composite') {
        return content
      }
    },
    a_answer (question) {
      const {type, content} = question
      const answer_arr = []
      if (content == null) return '未作答'
      if (type == 'single'){
        if (!content) return '未作答'
        return content
      } else if (type == 'multiple') {
        if (content.length == 0) return '未作答'
        let arr = JSON.parse(JSON.stringify(content))
        return arr.sort().join(',')
      } else if (type == 'judge') {
        if (!content) return '未作答'
        return content == 'yes' ? '正确' : '错误'
      } else if (type == 'text') {
        if (content.length == 0) return '未作答'
        return content.join(' |---| ')
      } else if (type == 'composite') {
        if (!content) return '未作答'
        return content
      }
    },
    _index2ABC (index) { // 下标转ABCD选项
      const A_ascii = 65;
      return String.fromCharCode(A_ascii + index);
    },
    _lookExam () { // 查看试卷
      if (this.lookError) { // 查看错题
        this.$API.getExamDetail(this._examid, this.lookError)
        .then(data => {
          console.log('查看错题')
          // data.questions.forEach(item => {item.question.content = item.question.content})
          let o = {}; // 每题已选答案
          /* 正常流程 */
          let arry = data.questions.map(item => {
            o[`${item.question.type}-${item.id}`] = JSON.parse(item.answer)
            return Object.assign({}, item.question, {id: item.id, noPass: !item.is_pass})
          })

          this.questions = arry.filter(item=>item.noPass)
          this.my_total_score = data.testUser.total_score
          this.my_score = data.testUser.score
          this.answers = o
          this.exam = data.exam
          // this.countdown = data.test.limitTime * 60
        })
      } else {
        this.$API.getExamDetail(this._examid)
        .then(data => {
          console.log(data)
          // data.questions.forEach(item => {item.question.content = item.question.content})
          /* 正常流程 */
          this.questions = data.questions.map(item => {
            return Object.assign({}, item.question, {id: item.id})
          })
          let o = {};
          this.questions.forEach(item => {
            if (item.type == 'multiple' || item.type == 'text') {
              o[`${item.type}-${item.id}`] = []
            } else {
              o[`${item.type}-${item.id}`] = ''
            }
          })
          this.answers = o
          this.exam = data.exam
          // this.countdown = data.test.limitTime * 60
        })
      }
    },
    _startExam () { // 获取试卷并开始考试
    	if(this._isMakeup==1){this._isMakeup='?makeup=1'}else{this._isMakeup=''}
      this.$API.startExam(this._examid+this._isMakeup)
      .then(data => {
        console.log(data)
        // data.questions.forEach(item => {item.question.content = item.question.content})
        /* 正常流程 */
        this.questions = data.questions.map(item => {
          return Object.assign({}, item.question, {id: item.id})
        })
        let o = {};
        this.questions.forEach(item => {
          if (item.type == 'multiple' || item.type == 'text') {
            o[`${item.type}-${item.id}`] = []
          } else {
            o[`${item.type}-${item.id}`] = ''
          }
        })
        this.answers = o
        this.exam = data.test
        this.submitId = data.submit.id
        this.countdown = data.test.limitTime * 60
        this._setCountDown()
        this.examing = true
      })
    },
    submitExam () { // 提交考卷
      let answers = []
      try {
        console.log(this.answers)
        for (let prop in this.answers) {
          if (this.answers[prop] instanceof Array) {
            if (this.answers[prop].length < 1) {
              throw Error(`${this._getQuestName(prop.slice(0, prop.indexOf('-')))}未答完`)
            } else {
            	answers.push({id: prop.slice(prop.indexOf('-') + 1), answer: this.answers[prop]})
            }
          } else if (!this.answers[prop] && this.answers[prop] !== 0) {
            throw Error(`${this._getQuestName(prop.slice(0, prop.indexOf('-')))}未答完`)
          } else {
      			answers.push({id: prop.slice(prop.indexOf('-') + 1), answer: this.answers[prop]})
          }
        }
      } catch (e) {
        let errmsg = e.message;
        let _answers = [];
        for (let prop in this.answers) {
          _answers.push({id: prop.slice(prop.indexOf('-') + 1), answer: this.answers[prop]})
        }
        this.$confirm(`${errmsg}, 是否继续提交试卷`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$API.submitExam(this.submitId, {answers: JSON.stringify(_answers)})
          .then(data => {
            console.log(data)
            this.result = data
            this.examing = false
            this.dialogTableVisible = true
            window.clearInterval(this.timer)
            this.timer = null
          })
        }).catch(() => {

        });
        return ;
      }

      this.$API.submitExam(this.submitId, {answers: JSON.stringify(answers)})
      .then(data => {
        console.log(data)
        this.result = data
        this.examing = false
        this.dialogTableVisible = true
        window.clearInterval(this.timer)
        this.timer = null
      })

    },
    _getQuestName(ename) {
      switch (ename) {
        case 'single':
          return '单选题'
        case 'multiple':
          return '多选题'
        case 'judge':
          return '判断题'
        case 'text':
          return '填空题'
        case 'composite':
          return '问答题'
        default: ;
      }
    },
    toList() {
      this.dialogTableVisible = false
      this.$router.replace('/home/myExamList')
    },
    toError() {
      let open = window.open(`/#/examing/checkError/${this.result.id}`, '_blank')
      open.opener = null;
    },
    toBack() {
      if (this.checkmode && this.lookError) {
        window.close()
      } else {
        this.$router.go(-1)
      }
    },
    _setCountDown () { // 设置倒计时
      this.timer = window.setInterval(() => {
        this.countdown--
        if (this.countdown < 0) {
          this.countdown = 0;
          // 时间已到
          // 在此作强制交卷
          window.clearInterval(this.timer)
          this.timer = null
          this.submitExam()
        }
      }, 1000)
    },
    getRowSpan (num) {
      const span = Math.floor(24 / num);
      return span < 6 ? 6 : span;
    },
    sortAnswer (val) {
      val.sort()
    },
    onchange (val) {
      // console.log(this.answers)
    },
    genTypeQuestions (typeName) {
      if (!this.questions.length) return []
      const arr = this.questions.filter(item => item.type == typeName)
      this.pagination[typeName].total = arr.length
      return arr
    },
    genTypeCurrQuestions (typeName) {
      const {pageNo, total, pageSize} = this.pagination[typeName];
      let questions;
      switch (typeName) {
        case 'single':
          questions = this.singleQuestions;
          break;
        case 'multiple':
          questions = this.multiQuestions;
          break;
        case 'judge':
          questions = this.judgeQuestions;
          break;
        case 'text':
          questions = this.textQuestions;
          break;
        case 'composite':
          questions = this.compositeQuestions;
          break;
        default:
          return [];
      };
      if (pageNo == 1)
        return questions.slice(0, pageSize)
      if (pageNo * pageSize >= total)
        return questions.slice((pageNo - 1) * pageSize)
      return questions.slice((pageNo - 1) * pageSize, pageNo * pageSize)
    },
    scaleImg (url) {
      this.$alert(`<img src="${url}"/>`, {
          dangerouslyUseHTMLString: true,
          customClass: 'scaleBox',
          showClose: false,
          showConfirmButton: false,
          closeOnClickModal: true
        })
    }
  }
}
</script>

<style>
.examing-page {width: 100%; height: 100%; background: #c7eece;}
.examing-page .question-block{margin-bottom: 2rem;}
.examing-page .el-radio__label{font-size: 16px;}
.examing-page .el-radio__input.is-disabled + span.el-radio__label,
.examing-page .el-checkbox__input.is-disabled + span.el-checkbox__label{color: #555658;}
.examing-page .el-pager li {background: #c7eece;}
.examing-page .el-pagination button{background: #c7eece;}
.examing-page .el-header{ line-height: 60px; font-size: 20px; border-bottom: 1px #e6e6e6 solid; background: #0366bb; color: #fff;}
.examing-page .quit-btn{ font-size: 14px; margin-left: 20px; cursor: pointer; text-decoration: underline; }
.examing-box { padding: 20px 230px !important; }
.examing-box .el-radio, .examing-box .el-checkbox__label { white-space: normal; }
.examing-box .el-checkbox__label { white-space: normal; padding-right: 10px; }
.examing-box .el-checkbox__input { vertical-align: top; margin-top: 3px; }
.examing-box .title { font-size: 1.3em; }
.examing-box .title-error { color: #ff5050; }
.examing-box .answer { font-size: 0.9em; }

.examing-box .images { font-size: 0.5em; display: flex; flex-direction: row; }
.examing-box .images .imageWrap { position: relative; width: 100px; height: 100px; border-radius: 6px; margin: 0 5px; }

.examing-box .images .imageWrap:hover .modal { display: flex;}
.examing-box .images .imageWrap .modal { cursor: pointer; border-radius: 6px; display: none; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.5); color: #fff;}
.examing-box .images .imageWrap > img { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 6px; }
.resultBox { height: 350px; padding: 0 150px;}
.resultBox .content > div { height: 54px;}
.resultBox .content > div + div { border-top: 1px solid #ccc;}
.resultBox .content > div > span { margin: 0 20px; text-align: center;}
.resultBox > div { width: 100%; }
.scaleBox { max-width: 80%; width: auto;}
.scaleBox img { width: 100%;}
.el-tabs--right .el-tabs__header.is-right {
  float: right;
  margin-bottom: 0;
  border: 1px red solid !important;
  margin-left: 10px; }

.el-tabs--right .el-tabs__nav-wrap.is-right {
  margin-left: 1px !important; }

.el-tabs__item.is-right{ font-size: 18px !important;font-weight:bold ;}


.el-tabs__item:nth-of-type(1) {
  background: #EEE8AA;
}
.el-tabs__item:nth-of-type(2) {
  background: #F0E68C;
}
.el-tabs__item:nth-of-type(3) {
  background: #F4A460;
}
.el-tabs__item:nth-of-type(4) {
  background: #FF7F50;
}
.el-tabs__item:nth-of-type(5) {
  background: #FFDEAD;
}

</style>
